const { resolve } = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    // 入口路径可以是相对路径
    entry: {
        index: './src/index.js',
        login: './src/login.js',
    },
    output: {
        // 出口路径必须是绝对路径
        path: resolve(__dirname, './build'),
        filename: '[name].[chunkhash:7].js',
    },
    // production会自动进行代码压缩 development 不会
    mode: 'development',
    // loader解析的路径配置
    resolveLoader: {
        modules: ['./node_modules', './myLoaders'],
    },
    // 无顺序要求
    plugins: [
        new CleanWebpackPlugin(),
        // 自动生成html模板
        new htmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            // 资源区分，引用那个chunks组的资源文件
            chunks: ['index'],
        }),
        // 将样式放到独立文件中
        new MiniCssExtractPlugin({
            filename: './css/index.css',
        }),
        new htmlWebpackPlugin({
            template: './public/login.html',
            filename: 'login.html',
            chunks: ['login'],
        }),
    ],
    // loader
    /*
      webpack默认只会编译处理js json格式数据，那么如何继承样式 图片 vue jsx等模块？
    
    */
    module: {
        rules: [
            {
                test: /\.css$/,
                //'css-loader' 处理css文件的加载
                // style-loader通过dom操作将样式以style标签插入页面中
                // MiniCssExtractPlugin.loader 将样式放到独立文件中
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.less$/,
                //'css-loader' 处理css文件的加载
                // style-loader通过dom操作将样式以style标签插入页面中
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'my-style-loader',
                    // 'my-css-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader',
                    // 'my-less-loader',
                ],
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'loader-async',
                        options: {
                            name: 'tom',
                        },
                    },
                    {
                        loader: resolve(
                            __dirname,
                            './myLoaders/loader-sync.js'
                        ),
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        // 指定图片存放目录
                        outputPath: 'images',
                        publicPath: '../images/',
                        limit: 5 * 1024 // 超过11k 抽出文件
                    },
                },
            },
        ],
    },
};
